<template>
<div class="common-layout">
     <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        
       <div class="singleArtical">
        <!--作者、发布时间、技术  -->
        <div class="el-row">
            <div class="articalDescription">
                <div>{{ author }}</div>
                <div>{{ time }}</div>
                <div>{{ way }}</div>
            </div>
            <!-- 删除 -->
            <el-icon :size="25" class="closeIcon" @click="">
                <Close />
            </el-icon>
        </div>
        <!-- 整体和图片row排序 -->
        <div class="el-row">
            <!-- 内容和反馈colmnu排序 -->
            <div class="el-colmnu">
                <div class="Content">
                    <div class="title">{{ title }}</div>
                    <div class="dis">{{ content }}</div>
                </div>
                <div class="articalFeedback">
                    <div>
                        <el-icon class="eachIcon">
                            <View />
                        </el-icon>
                        <span>{{ view }}</span>
                    </div>
                    <div>
                        <el-icon class="eachIcon">
                            <!-- <Like/> -->
                        </el-icon>
                        <span>{{ like }}</span>
                    </div>
                    <div>
                        <el-icon class="eachIcon">
                            <ChatRound />
                        </el-icon>
                        <span>{{ comment }}</span>
                    </div>
                </div>
            </div>
            <div>
                <el-image style="width: 180px; height: 100px" :src="url" />
            </div>
        </div>
        <!-- <li >{{ i }}</li> -->

      </el-main>
    </el-container>
  </div>
</template>

<script>
// import Header from './header.vue';

import Header from "./header.vue";
import Main from './main.vue'
import list from './list.vue'

export default {
    components: { Header,Main ,list},
    
    data () {
      return {
        count: 0,
        return {
            url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            author: '前端喜哥',
            time: '5个月前',
            way: '前端·JavaScript',
            title: 'JavaScript的23种设计模式',
            content: '只要你有优化代码的习惯，那么你在工作场景种会经常接触到各种...',
            view: '1.6w',
            like: '401',
            comment: '32',
        }
      }
    },
    methods: {
      load () {
        this.count += 4
      }
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.common-layout{
    height: 100%;
    width: 100%;    
}
  .el-container {
    height: 100%;
    width: 100%;
  }

  .el-header {
    width: 100%;
    height: 20%;
  }

  .el-main {
    background-color: #f4f5f5; 
    /* color: #333;  */
    text-align: center; 
    line-height: 160px;
    width: 100%;
  }
 










.infinite-list {
  height: 800px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}




</style>